<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/mui.min.css" rel="stylesheet" />
  <link href="css/icons-extra.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/base.css">
  <script src="js/mui.min.js"></script>
  <title></title>
</head>

<body>
  <!-- 底部导航 -->
  <nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="javascript:;" data-id="hotlook">
      <span class="mui-icon mui-icon-home"></span>
      <span class="mui-tab-label">首页</span>
    </a>
    <!-- <a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a> -->
    <a class="mui-tab-item" href="javascript:;" data-id="ranking">
      <!-- <span class="mui-icon mui-icon-contact"></span> -->
      <span class="mui-icon mui-icon-extra mui-icon-extra-rank"></span>
      <span class="mui-tab-label">榜单</span>
    </a>
    <a class="mui-tab-item" href="javascript:;" data-id="setting">
      <span class="mui-icon mui-icon-gear"></span>
      <span class="mui-tab-label">设置</span>
    </a>
  </nav>
  <script type="text/javascript">
    mui.init();
    // 页面窗口APP开发
    mui.plusReady(function () { //对plus进行初始化
      // 监听设备已经启动加载完毕，然后接下来使用plus对象
      //创建父窗口
      let parent = plus.webview.currentWebview(); //获取当前对象
      // 添加3个主页面的子窗口
      let subPage = [{
        url: 'pages/hotlook.html',
        id: 'hotlook'
      }, {
        url: 'pages/ranking.html',
        id: 'ranking'
      }, {
        url: 'pages/setting.html',
        id: 'setting'
      }]
      let child;
      subPage.forEach((page, i) => {
        // 添加3个页面子窗口
        child = plus.webview.create(page.url, page.id, {
          top: 0,
          bottom: '50px'
        });

        // 对三个子窗口先进行设置(第1个显示，第2，3个子窗口进行隐藏)
        if (i > 0) {
          // 循环到第2次、第3次的时候隐藏
          child.hide();
        }
        // 父窗口添加3个子窗口
        parent.append(child);
      })
      // 当前窗口
      let currentTab = subPage[0].id;

      // 给底部导航添加点击事件,tap
      mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
        //点击导航显示对应的页面窗口
        let tabId = this.dataset.id;
        console.log(tabId);
		   console.log(currentTab);

        // 避免重复点击导航
        if (tabId == currentTab) {
          return;
        }
        // 显示对应的窗口（通过id名识别的）
        // plus.webview.show(tabId);
        // 加动画
		console.log(4)
        plus.webview.show(tabId, 'fade-in', 200);

        // 隐藏当前窗口
        plus.webview.hide(currentTab.id);

        // 重新设置currentTab当前页面
        currentTab = subPage.find(v => v.id == tabId).id;
      })
    })
  </script>
</body>

</html>